<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<link rel="stylesheet" href="css/bootstrap-3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/register.css" />
<link rel="stylesheet" href="css/newListcommon.css" />
<link rel="stylesheet" href="css/evaluation.css" />
<link rel="stylesheet" href="css/maintenanceForm.css" />
<style>
    #showFile a{
        display: block;
        text-decoration: none;
        color:#777;
        line-height:24px;
    }
    .comTreemodal .modal-dialog{
        width:1000px;
        max-width:1000px;
    }
    .comTreemodal .modal-dialog .modal-body{
        height:500px;
        overflow:scroll;
    }
    .cancelBtn{
        display: inline-block;background: #e36858;color:#fff !important;width: 120px;height: 40px;text-align: center;line-height: 40px;font-weight: 400;border-radius: 2px;text-decoration: none;
    }
</style>
<%-- 导入面包屑 --%>
<jsp:include page="../common/nav.jsp"></jsp:include>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="purchaseOrder addMaintenanceForm">
        <form id="form" action="web/poAgreementHeadAppend/editPoLine" method="post">
            <div class="formTitle">合同补充信息</div>
            <div class="trackInfomation">
                <input id="poLineId" name="poLineId" type="hidden" value="${requestScope.poLine.poLineId}">
                <input id="poName" name="poName" type="hidden" value="${requestScope.poLine.poName}">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同名称：</label>
                            <select class="form-control" name="poHeadCode" id="poHeadCode" onchange="funcPoHeadSelect()">
                                <option>请选择合同名称</option>
                                <c:forEach items="${requestScope.poHeadMap}" var="poHead">
                                    <option value="${poHead.key}">${poHead.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>合同编码：</label>
                            <input id="poLine_poHeadCode" type="text" class="form-control" placeholder="合同编码" value="${requestScope.poLine.poHeadCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>签订单位：</label>
                            <input id="vendorCode" name="vendorCode" type="text" class="form-control" placeholder="请选择签订单位"   value="${requestScope.poLine.vendorCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>发起单位：</label>
                            <input id="sponsorCode" name="sponsorCode" type="text" class="form-control" placeholder="请选择发起单位" value="${requestScope.poLine.sponsorCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>实施站点：</label>
                            <input id="orgCode" name="orgCode" type="text" class="form-control" placeholder="请选择实施站点" value="${requestScope.poLine.orgCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>实施部门：</label>
                            <input id="departmentCode" name="departmentCode" type="text" class="form-control" placeholder="请选择实施部门" readonly value="${requestScope.poLine.departmentCode}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>签订日期：</label>
                            <input id="startDate" name="startDate" type="text" class="form-control" placeholder="签订日期" value="${requestScope.poLine.startDate}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span></span>
                            <label>终止日期：</label>
                            <input id="endDate" name="endDate" type="text" class="form-control" placeholder="终止日期" value="${requestScope.poLine.endDate}" readonly>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <span>*</span>
                            <label>补充条款描述：</label>
                            <textarea style="height:80px !important;" id="memo" name="memo" class="form-control fuyan" rows="3">${requestScope.poLine.memo}</textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <span></span>
                            <label class="fuyanText">上传附件：</label>
                            <div class="upload-wrap fuyanFile" id="uploadImgBtn0">
                                <input style="width:180px;" type="file" multiple="multiple" name="files" id="file0"/>
                                <input id="fileUrl" name="fileUrl" type="hidden"  value="${requestScope.poLine.fileUrl}">
                                <span style="color:#2972FA;font-size:14px;position:relative;top:1px;opacity:0.8; ">上传文件不能超过10M</span>
                            </div>
                        </div>
                        <div id="showFile" style="margin-left:136px;"></div>
                    </div>
                </div>
                <div class="formTitle">签批流程设置</div>
                <div class="trackInfomation">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <span>*</span>
                                <label>选择流程审批人：</label>
                                <input id="nextapproverid" name="nextapproverid" type="hidden" class="form-control" >
                                <input id="nextapprovername" name="nextapprovername" type="text" class="form-control" placeholder="请选择人员" data-toggle="modal" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="trackSubmit">
                    <button id="submit" data-toggle="modal" data-target=".bs-example-modal-sm">提交</button>
                    <a class="cancelBtn" id="cancel" onclick="window.location.href='web/poAgreementHeadAppend/getPoLineList'">取消</a>
                </div>
            </div>
        </form>
    </div>
    <!--选择下一步审批人模态框-->
    <div id="approverSelect" class="modal comTreemodal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content" >
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <c:import url="/web/hrDepartment/getHrDepartmentTreeReadOnly" charEncoding="utf-8"></c:import>
                        </div>
                        <div id="relateListDiv" class="col-sm-6"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submitSelect">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        //下一步流程审批者
        $("#nextapprovername").on("click",function(){
            $('#approverSelect').modal('show');
            $('.show').removeClass("modal-backdrop");
        });
        $("#submitSelect").on("click",function(){
            debugger;
            var apprcodes = "";//选中参与者编码串
            var apprnames = "";//选中参与者名称串
            var checkedIds = $("#userSelect").find("input"), ids = [];
            for (var i = 0; checkedIds && i < checkedIds.length; i++) {
                var obj = $("#userSelect").find("input").eq(i);
                if (obj.is(":checked")) {
                    ids.push(obj.attr("id"));
                }
            }
            console.log(ids);
            if(ids.length>0){
                $.each(ids, function (index, item) {
                    apprcodes+=item.split('_')[0]+',';
                    apprnames+=item.split('_')[1]+',';
                });
                $('#nextapproverid').val(apprcodes.substring(0,apprcodes.length-1));
                $('#nextapprovername').val(apprnames.substring(0,apprnames.length-1));
                $('#approverSelect').modal('hide');
            }else{
                redragonJS.alert("请选择流程参与者");
            }
        });

        //初始化合同信息
        if("${requestScope.poLine.poHeadCode}"!=""){
            $("#poHeadCode").val("${requestScope.poLine.poHeadCode}");
        }

        //初始化附件
        if("${requestScope.poHead.fileUrl}"!=""){
            var urls="${requestScope.poHead.fileUrl}".split(",");
            var html = "";
            for (var i = 0; i <urls.length; i++) {
                if(urls[i]!=""){
                    html+="<a href='"+urls[i]+"'>"+urls[i].substr(urls[i].lastIndexOf("/") + 1)+"</a>\n"
                }
            }
            $("#showFile").html(html);
        }

        //表单提交
        var l = $("#save").ladda();
        l.click(function() {
            $("#form").valid();
        });

        $("#form").validate({
            rules : {
                poHeadCode : {
                    required : true,
                    isCode : true,
                }
            },
            submitHandler: function(form) {
                var submitFlag = "Y";
                //提交
                if(submitFlag=="Y"){
                    l.ladda('start');
                    form.submit();
                }

            }
        });
    });

    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn0").click(function(e){
        imagesUpload(e);
    })

    function imagesUpload(e){
        var cid=e.currentTarget.id;
        var s=cid.substr(cid.length-1,1);
        /*
        1、先获取input标签
        2、给input标签绑定change事件
        3、把图片回显
         */
        //1、先回去input标签
        var $input = $("#file"+s+"");
        //2、给input标签绑定change事件
        $input.on("change" , function(){
            //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
            //获取选择图片的个数
            var files = this.files;
            // 通过FormData将文件转成二进制数据
            // 文件元素
            var file = document.querySelector('[type=file]');
            // 通过FormData将文件转成二进制数据
            var formData = new FormData();
            for(var i = 0;i<files.length;i++){
                formData.append("imgs", files[i]);
            }
            var ss=formData.get("fileImage[]");
            $.ajax({
                type: "post",
                url:  "web/poAgreementHead/file",
                data: formData,
                dataType: "json",
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                xhrFields:{withCredentials:true},
                async: true,    //默认是true：异步，false：同步。
                success: function (data) {
                    if(data!=""){
                        var url="";
                        var html = "";
                        for (var i=0;i<data.length;i++){
                            url+=data[i]+",";
                            html+="<a href='"+data[i]+"'>"+data[i].substr(data[i].lastIndexOf("/") + 1)+"</a>\n"
                        }
                        $("#fileUrl").val(url);
                        $("#showFile").html(html);
                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    redragonJS.alert(textStatus);
                },
            });
        })
    }

    //合同信息选中，加载信息
    function funcPoHeadSelect(){
        $.ajax({
            type: "post",
            url: "web/poAgreementHeadAppend/getPoHeadByCode",
            data: {"poHeadCode": $("#poHeadCode").val()},
            async: true,
            dataType: "json",
            cache: false,
            success: function(data){
                $('#poName').val(data.poName);
                $('#poLine_poHeadCode').val(data.poHeadCode);
                $('#vendorCode').val(data.vendorCode);
                $('#sponsorCode').val(data.sponsorCode);
                $('#orgCode').val(data.orgCode);
                $('#departmentCode').val(data.departmentCode);
                $('#startDate').val(dateFormat(data.startDate,"Y-m-d"));
                $('#endDate').val(dateFormat(data.endDate,"Y-m-d"));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }

    var dateFormat = function (timestamp, formats) {
        // formats格式包括
        // 1. Y-m-d
        // 2. Y-m-d H:i:s
        // 3. Y年m月d日
        // 4. Y年m月d日 H时i分
        formats = formats || 'Y-m-d';

        var zero = function (value) {
            if (value < 10) {
                return '0' + value;
            }
            return value;
        };

        var myDate = timestamp? new Date(timestamp): new Date();

        var year = myDate.getFullYear();
        var month = zero(myDate.getMonth() + 1);
        var day = zero(myDate.getDate());

        var hour = zero(myDate.getHours());
        var minite = zero(myDate.getMinutes());
        var second = zero(myDate.getSeconds());

        return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
            return ({
                Y: year,
                m: month,
                d: day,
                H: hour,
                i: minite,
                s: second
            })[matches];
        });
    };
</script>
<script>
    //jstree单击事件
    var selectedNodeId = -1;
    function clickJsTree(nodeId){
        if(selectedNodeId!=nodeId){
            selectedNodeId = nodeId;
            getRelateListAjax(selectedNodeId,null);
        }
    }

    //默认jstree选择
    function stateReadyJsTree(nodeId){
        if("${param.departmentId}"==""){
            selectedNodeId = nodeId;
            getRelateListAjax(selectedNodeId,null);
        }else{
            selectedNodeId = nodeId;
        }
    }
    //ajax获取关联列表
    function getRelateListAjax(id,page){
        redragonJS.loading("relateListDiv");
        $.ajax({
            type: "get",
            url: "web/hrStaffDepartmentR/getFlowSelectRelateListAjax",
            data: {"departmentId": id,"page":page==null?1:page},
            async: false,
            dataType: "html",
            cache: false,
            success: function(data){
                redragonJS.removeLoading("relateListDiv");
                if(data!=""){
                    $("#relateListDiv").html(data);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }


    function getAddRelateModal(nodeId, id){
        $.ajax({
            type: "post",
            url: "web/hrStaffDepartmentR/getHrStaffDepartmentR",
            data: {"departmentId": nodeId,"sdId": id},
            async: false,
            dataType: "html",
            cache: false,
            success: function(data){
                if(data!=""){
                    $("#addModal").html(data);
                    $('#addDiv').modal('show');
                    $("div").removeClass("modal-backdrop show");
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }
</script>

